<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>销售工具</el-breadcrumb-item>
                <el-breadcrumb-item>库存管理</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="btnBox">
                <el-input size="small" placeholder="请输入商品名称" clearable @clear="clearInput" v-model="searchName"
                    class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="searchHandle"></el-button>
                </el-input>
            </div>
            <el-table row-key="nums" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                :data="stockList" border style="width: 100%" height="670"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="productNum" label="库存"></el-table-column>
                <el-table-column prop="productUnit" label="单位"></el-table-column>
                <!-- <el-table-column prop="factoryName" label="厂家"></el-table-column> -->
                <el-table-column prop="warehouseName" label="仓库"></el-table-column>
                <el-table-column prop="salePrice" label="销售价"></el-table-column>
                <el-table-column prop="barCode" label="批号"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>
import { listProductStock } from '../../network/stockList'

export default {
    name: 'product',
    data() {
        return {
            stockList: [],
            searchName: '',
        }
    },
    created() {
        this.getList()
    },
    methods: {


        getList() {
            listProductStock({
                productStockName: this.searchName,
                companyId: sessionStorage.companyId,
            }).then(res => {
                if (res.flag) {
                    this.stockList = res.data.list
                    this.total = res.data.total
                    console.log(res);


                    var res = res.data
                    var nums = 0;
                    var arr = [];
                    console.log(res);
                    for (var i in res) {
                        res[i].nums = nums;
                        nums++;
                        var flag = true;
                        for (var j in arr) {
                            if (res[i].productId == arr[j].productId) {
                                flag = false;
                                arr[j].productNum += res[i].productNum;
                                arr[j].children.push(res[i]);
                            }
                        }
                        if (flag) {
                            arr.push({
                                productId: res[i].productId,
                                productName: res[i].productName,
                                formatName: res[i].formatName,
                                productNum: res[i].productNum,
                                supplyPrice: 0.0,
                                salePrice: '',
                                children: [res[i]],
                                nums: nums
                            });
                            nums++;
                        }
                    }
                    console.log(arr);

                    this.stockList = arr
                }
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getList()
        },
        searchHandle() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },
        clearInput() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },

    }
}
</script>

<style lang="less" scoped>
.paginationBox {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}


.input-with-select {
    width: 300px;
}

.btnBox {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
</style>